<template>
  <el-form
      label-position="top"
      ref="ruleFormRef"
      :model="registerForm"
      :rules="rules"
  >
    <el-form-item label="用户名" prop="userName">
      <el-input v-model="registerForm.userName"></el-input>
    </el-form-item>
    <el-form-item label="手机号码" prop="mobile">
      <div class="w-full flex">
        <el-input v-model="registerForm.mobile"></el-input>
        <el-button @click="submitAuth">发送验证码</el-button>
      </div>
    </el-form-item>
    <el-form-item prop="auth">
      <el-input v-model="registerForm.auth" placeholder="请输入验证码"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="registerForm.password"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input type="password" v-model="registerForm.confirmPassword"></el-input>
    </el-form-item>
    <el-button @click="submitForm(ruleFormRef)" class="w-full" type="primary">注册</el-button>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import {register} from "@/api/user";
import {ElMessage} from "element-plus";
import {sms} from "@/api/sms";
import {hashInfo} from "@/utils/hash";
import {useRouter} from "vue-router";

const router = useRouter()

function isMobilePhone(str) {
  // 中国手机号码格式：11位数字，以1开头
  const reg = /^1\d{10}$/
  return reg.test(str)
}

const ruleFormRef = ref<FormInstance>()

const validateUserName = (rule: any, value: any, callback: any) => {
  if (registerForm.userName === ""){
    callback(new Error("请输入用户名"))
  }else {
    callback()
  }
}

//手机号码验证
const validateMobile = (rule: any, value: any, callback: any) => {
  if (registerForm.mobile === ""){
    callback(new Error("请输入手机号"))
  }else if (!isMobilePhone(registerForm.mobile)){
    callback(new Error("请输入正确的手机号"))
  }else {
    callback()
  }
}

//检测验证码是否正确
const validateConfirmAuth = (rule: any, value: any, callback: any) => {
  //编写检测验证码逻辑
  if (registerForm.auth !== authCode){
    callback(new Error("你确定验证码正确？？？"))
  }else {
    callback()
  }
}

//密码验证
const validatePassword = (rule: any, value: any, callback: any) => {
  if (registerForm.password === ""){
    callback(new Error("请输入密码"))
  }else if (registerForm.password.length < 8){
    callback(new Error("您的密码不安全，建议修改"))
  }else {
    callback()
  }
}

//验证密码是否一致
const validateConfirmPassword = (rule: any, value: any, callback: any) => {
  if (registerForm.confirmPassword !== registerForm.password){
    callback(new Error("您的密码与上述不一致"))
  }else {
    callback()
  }
}

const registerForm = reactive({
  userName:"",
  mobile:"",
  auth:"",
  password:"",
  confirmPassword:"",
})

const rules = reactive<FormRules>({
  userName:[{ validator: validateUserName, trigger: 'blur' }],
  mobile: [{ validator: validateMobile, trigger: 'blur' }],
  auth: [{validator: validateConfirmAuth, trigger: 'blur'}],
  password: [{ validator: validatePassword, trigger: 'blur' }],
  confirmPassword:[{validator:validateConfirmPassword, trigger: 'blur'}]
})

const submitForm = (formEl: FormInstance | undefined) => {
  // 提交时的表单验证
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })

  // 前端信息加密
  for (const key in registerForm) {
    if (key === "auth" || key === "userName"){
      continue
    }else {
      registerForm[key] = hashInfo(registerForm[key])
    }
  }

  // 发送请求
  register(registerForm).then(res=>{
    router.push({name:"login"})
    ElMessage({
      message:res.data,
      type:"success"
    })
  })

  //清空表单数据
  for (const key in registerForm) {
    registerForm[key] = ""
  }
}

let authCode;

const submitAuth = async ()=>{
  //请求发送验证码
  const result = await sms(registerForm.mobile)
  authCode = result.data
}
</script>

<style scoped>

</style>
